<template>
  <div class="home">
    <el-container>
      <el-header>
        <el-button
          class="btn_research"
          type="success"
          plain
          @click="go('/research')"
          >植物百科</el-button
        >
        <el-button class="btn_search" type="success" plain @click="go('search')"
          >植物检索</el-button
        >
      </el-header>
      <el-aside>
        <div class="top">
          <el-input
            v-model="input3"
            class="input"
            placeholder="请输入您要查询的植物所在的属"
            size="large"
          />
          <el-button type="success" plain size="small">搜索</el-button>
        </div>
        <div class="tree">
          <el-scrollbar height="100%;">
            <el-tree
              :data="data"
              :props="defaultProps"
              @node-click="handleNodeClick"
            ></el-tree>
          </el-scrollbar>
        </div>
      </el-aside>
      <el-main>
        <!-- <img  @click="goToAbout()" src="../assets/lizhi.jpg"/> -->
        <div id="mapContainer"></div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import createInfoWindow from "../utils.js/amap";
export default {
  name: "Home",
  components: {},
  data () {
    return {
      input3: "",
      data: [
        {
          label: "无患子科",
          children: [
            {
              label: "荔枝属",
            },
            {
              label: "龙眼属",
            },
          ],
        },
        {
          label: "漆树科",
          children: [
            {
              label: "杧果属",
            },
          ],
        },
        {
          label: "禾本科",
          children: [
            {
              label: "甘蔗属",
            },
          ],
        },
        {
          label: "酢浆草科",
          children: [
            {
              label: "阳桃属",
            },
          ],
        },
        /** 
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },
          {
          label: "酢浆草科",
          children:[
            {
              label:"阳桃属"
            }
          ]
        },*/
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      select: "",

      pointList: [
        {
          title: "地点1",
          local: [113.050818, 24.912506],
          family: "Moraceae",
          genus: "Ficus",
          genericName: "Ficus",
          specificEpithet: "erecta",
          note: "这是啥地方"
        },
        {
          title: "地点2",
          local: [113.885224, 23.640932],
          family: "Moraceae",
          genus: "Ficus",
          genericName: "Ficus",
          specificEpithet: "erecta",
          note: "这是个风景优美的地方吗"
        },
        {
          title: "地点3",
          local: [117.651005, 26.339452],
          family: "Moraceae",
          genus: "Ficus",
          genericName: "Ficus",
          specificEpithet: "erecta",
          note: "阿瑟文学阿瑟文学阿瑟文学阿瑟文学"
        },
        {
          title: "地点4",
          family: "Moraceae",
          genus: "Ficus",
          genericName: "Ficus",
          specificEpithet: "erecta",
          local: [120.166667, 30.266667],
          note: "你是我的神"
        },
      ],
      map: null,
    };
  },
  watch: {

  },
  mounted () {
    this.initMap();
  },
  created () {


  },

  methods: {
    go (path) {
      this.$router.push(path);
    },
    goToAbout () {
      this.$router.push({
        path: "/about",
        query: {
          name: this.select,
        },
      });
    },
    initMap () {
      let self = this;
      this.map = new window.AMap.Map('mapContainer', {
        resizeEnable: true,
        center: [113.050818, 24.912506],
        zoom: 14,//级别
        mapStyle: "amap://styles/fresh",
      });//初始化地图
      //遍历生成多个标记点
      for (var i = 0; i < this.pointList.length; i++) {
        const marker = new window.AMap.Marker({
          position: this.pointList[i].local, //不同标记点的经纬度
          map: self.map,
          icon: '',
        });

        marker.title = `<span>植物点</span>`;
        marker.content = JSON.stringify([
          "地址：" + this.pointList[i].title,
          "family：" + this.pointList[i].family,
          "genus：" + this.pointList[i].genus,
          "genericName：" + this.pointList[i].genericName,
          "specificEpithet：" + this.pointList[i].specificEpithet

          // "备注：" + this.pointList[i].note,
        ]);
        marker.on("click", self.markerClick);
        // marker.emit("click", { target: marker }); //默认初始化不出现信息窗体,打开初始化就出现信息窗体
      }
      //实例化信息窗体
      this.infoWindow = new window.AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: self.winInfo,
        offset: new window.AMap.Pixel(15, -35),
      });
      this.map.setFitView();
    },
    // 点标记点击事件
    markerClick (e) {
      let self = this;
      this.winInfo = JSON.parse(e.target.content);
      this.winTitle = e.target.title;
      // 设置窗体内容
      this.infoWindow.setContent(
        createInfoWindow.createInfoWindow(
          self.winTitle,
          self.winInfo.join("<br/>"),
          function () {
            // 关闭窗体
            self.map.clearInfoWindow();
          }
        )
      );
      // 打开窗体
      self.infoWindow.open(self.map, e.target.getPosition());
    },
  }
};
</script>

<style lang="scss" scoped>
.el-header {
  /* position: relative; */
  display: flex;
  flex-direction: row-reverse;
}
.btn_research {
  /* position: absolute;
  right: 20px; */
}
.btn_search {
  /* position: absolute;
  right: 120px; */
  margin-right: 10px;
}
.tree {
  position: absolute;
  /* top: 10%; */
  top: 11%;
  width: 100%;
  height: 90%;
}
.el-tree {
  color: rgb(102, 153, 52);
  font-weight: bold;
  height: 100%;
}
.el-scrollbar >>> .el-scrollbar__wrap {
  background: white;
}
.el-aside {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  // border: 1px solid #dedfe0;
  position: relative;
  left: 2%;
  width: 25%;
  height: 80%;
  overflow: hidden;
  background: rgb(240, 249, 235);
}
.el-aside .top {
  padding-top: 12px;
  height: 8%;
}

.input {
  width: 75%;
  margin-right: 4px;
  margin-left: 7px;
}
img {
  width: 100%;
}
.home .el-main {
  position: absolute;
  /* top: 7%; */
  top: calc(8% + 3px);
  right: 10%;
  border: 1px solid #dedfe0;
  background: white;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  /**background:  #e1f3d8;*/
  height: 80%;
  width: 55%;
}
.el-container {
  position: relative;
  height: 100%;
  width: 100%;
}
.home {
  height: 100%;
  width: 100%;
}

#mapContainer {
  margin-bottom: 2rem;
}
.amap-overlay-text-container {
  background: #86c8ea;
  color: #fff;
  font-size: 15px;
  border: 1px #326087 solid;
}

#mapContainer {
  width: 100%;
  height: 100%;
}
.content-window-card {
  position: relative;
  box-shadow: none;
  bottom: 0;
  left: 0;
  width: auto;
  padding: 0;
}

.content-window-card p {
  height: 2rem;
}

.custom-info {
  /* border: solid 1px silver; */
}

div.info-top {
  position: relative;
  background: #0f49b5;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #fff;
  padding: 0 10px;
}

div.info-top span:nth-child(2) {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

div.info-top img {
  position: absolute;
  top: 8px;
  right: 10px;
  transition-duration: 0.25s;
  width: 15px;
}

div.info-top img:hover {
  box-shadow: 0px 0px 5px #000;
}

div.info-middle {
  background: rgba(0, 54, 98, 0.8) !important;
  font-size: 12px;
  padding: 10px 6px;
  line-height: 20px;
  color: #fff;
}

div.info-bottom {
  height: 0px;
  width: 100%;
  clear: both;
  text-align: center;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 15px solid transparent;
  border-top: 20px solid rgba(0, 54, 98, 0.8);
}

div.info-bottom img {
  position: relative;
  z-index: 104;
}

.info-middle img {
  float: left;
  margin-right: 6px;
}
</style>
